<script lang="ts" setup>
const xcxImg = 'https://codelover.club/static/img/xcx.b213a034.jpg'
const carouselImg = [
  'https://codelover.club/stutasks/1618904954112_1.jpg',
  'https://codelover.club/stutasks/1618904954101_2.jpg',
  'https://codelover.club/stutasks/1618904954138_3.jpg',
  'https://codelover.club/stutasks/1618903429852_4.jpg',
  'https://codelover.club/stutasks/1618904954162_5.png'
]
</script>

<template>
  <div class="drop-shadow-xl w-full bg-gradient-to-t from-cyan-100 to-blue-400 flex rounded-xl">
    <div class="flex-1 hidden justify-center items-center flex-col sm:flex">
      <span class="text-2xl">数字化成长空间</span>
      <img :src="xcxImg" alt="mini-programs" class="w-[180px] h-[180px] mix-blend-multiply" />
    </div>
    <el-carousel class="flex-1 rounded-xl">
      <el-carousel-item v-for="item in carouselImg" :key="item">
        <img :src="item" alt="carousel-img" class="w-full h-full object-cover" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped></style>
